<div
	id="moduleAdd"
	class="modal fade bs-example-modal-lg"
	tabindex="-1"
	role="dialog"
	style="display: none"
	aria-hidden="true"
>
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Mudule Add</h4>
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
			</div>
			<div class="modal-body">
				<form
					action="javascript:void(0);"
					data-parsley-validate=""
					class="form-horizontal form-label-left"
					novalidate=""
				>
					<div class="item form-group">
						<label class="col-form-label col-md-3 col-sm-3 label-align"
							>User Name <span class="required">*</span>
						</label>
						<div class="col-md-6 col-sm-6">
							<input type="text" v-model="model.userName" required="required" class="form-control" />
						</div>
					</div>

					<div class="item form-group">
						<label class="col-form-label col-md-3 col-sm-3 label-align"
							>Password <span class="required">*</span>
						</label>
						<div class="col-md-6 col-sm-6">
							<input type="password" v-model="model.password" required="required" class="form-control" />
						</div>
					</div>

					<div class="form-group row">
						<label class="col-form-label col-md-3 col-sm-3 label-align">Roles</label>
						<div class="col-md-8">
							<span v-for="item in allRoles">
								<input type="checkbox" :value="item.id" v-model="model.roles" />{{item.roleName}}
							</span>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="button" @click="addModule()" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>
